<template>
  <div id="app">


  <h1>绑定属性</h1>
  <hr>
  <div v-bind:title="title" >鼠标瞄上去，看一下。</div>
  <img v-bind:src="url"/>

  <hr>
  <h1>绑定html</h1>
  <div v-html="h2">
  </div>

  <hr>
  <h1>绑定数据</h1>
  {{h2}}
  <div v-text="h2">
  </div>

  <hr>
  <h1>for</h1>
  <ul>
    <li v-for="item in list">
      {{item}}
    </li>
  </ul>

  <hr>
  <h1>v-bind:class = :class 使用</h1>
  <div v-bind:class="{'red':flag,'blue':!flag}">
    我是一个div
  </div>

  <hr>
  <h1>for,第一个高亮。</h1>
  <ul>
    <li v-for="(item,key) in list" v-bind:class="{'red':key==0}">
      {{key}}-{{item}}
    </li>
  </ul>

  <hr>
  <h1></h1>
  <div class="box" v-bind:style="{'width': boxWidth+'px'}">
    我是一个div
  </div>
    
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: '你好vue',
      title: '我是一个title',
      url: 'http://img21.mtime.cn/mg/2011/12/21/202609.62055305.jpg',
      h2: '<h2>我是一个h2</h2>',
      list: ['111','222','333'],
      flag: true,
      boxWidth: 300
    }
  }
}
</script>

<style lang="scss">

  .red{
    color: red;
  }

  .blue{
    color: blue;
  }

  .box{
    height: 100px;
    width: 100px;
    background: red;
  }

</style>
